export default {
    data() {
        return {
            // 图片预览弹出框
            dialogSrcVisible: false,
            // tabs切换的属性
            activeName: '0',
            // 添加商品表单
            addGoodsForm: {
                goods_name: '',
                goods_cat: '',
                goods_price: '',
                goods_weight: '',
                goods_number: '',
                goods_introduce: '',
                pics: [],
                attrs: []
            },
            // 级联选择器所有数据
            cascaderList: [],
            // 级联选择器配置参数
            cascaderProps: {
                label: 'cat_name',
                value: 'cat_id',
                children: 'children',
                expandTrigger: 'hover'
            },
            // 选中后的数据
            cascaderArr: [],
            // 动态参数数据
            manyList: [],
            // 静态属性数据
            onlyList: [],
            // 上传请求的头部
            headers: {
                Authorization: window.sessionStorage.getItem('token')
            },
            // 预览图片的路径
            imgSrc: '',
            // 校验规则
            rules: {
                goods_name: [{
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }, ],
                goods_price: [{
                    required: true,
                    message: '请输入商品价格',
                    trigger: 'blur'
                }, ],
                goods_weight: [{
                    required: true,
                    message: '请输入商品重量',
                    trigger: 'blur'
                }, ],
                goods_number: [{
                    required: true,
                    message: '请输入商品数量',
                    trigger: 'blur'
                }, ],
                goods_cat: [{
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }, ]
            }
        }
    },
    created() {
        this.getCascaderList();
    },
    methods: {
        // 获取级联选择器数据
        async getCascaderList() {
            let {
                data: res
            } = await this.$http.get('categories');
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('获取商品参数失败');
            this.cascaderList = res.data;
        },
        // 查询动态参数数据
        async getManyList() {
            let {
                data: res
            } = await this.$http.get('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes', {
                params: {
                    sel: 'many'
                }
            });
            if (res.meta.status != 200) return this.$message.error('查询参数失败');
            res.data.forEach(item => {
                this.addGoodsForm.attrs.push({
                    attr_id: item.attr_id,
                    attr_value: item.attr_vals
                })
                let arr = item.attr_vals.split(',');
                item.attr_vals = arr;
            });
            this.manyList = res.data;
        },
        // 查询静态属性
        async getOnlyList() {
            let {
                data: res
            } = await this.$http.get('categories/' + this.cascaderArr[this.cascaderArr.length - 1] + '/attributes', {
                params: {
                    sel: 'only'
                }
            });
            if (res.meta.status != 200) return this.$message.error('查询参数失败');
            res.data.forEach(item => {
                this.addGoodsForm.attrs.push({
                    attr_id: item.attr_id,
                    attr_value: item.attr_vals
                })
            });

            if (res.meta.status != 200) return this.$message.error('查询参数失败');
            // console.log(res)
            this.onlyList = res.data;
        },
        // 级联选择器方法
        handleChange() {
            if (this.cascaderArr.length != 3) {
                this.cascaderArr = [];
                return;
            };
            this.addGoodsForm.goods_cat = this.cascaderArr.join(',');
            this.getManyList();
            this.getOnlyList();
        },
        // 查看图片
        handlePreview(file) {zz
            this.dialogSrcVisible = true;
            this.imgSrc = file.response.data.url;
        },
        // 删除图片
        handleRemove(file) {
            // console.log(file)
            let index = this.addGoodsForm.pics.findIndex(item => item.pic == file.response.data.tmp_path);
            this.addGoodsForm.pics.splice(index, 1);
        },
        // 上传成功
        handleSuccess(response) {
            if (response.meta.status != 200) return this.$message.error('上传图片失败');
            this.$message.success(response.meta.msg);
            this.addGoodsForm.pics.push({
                pic: response.data.tmp_path
            });
        },
        // 添加商品
        addGoods() {
            this.$refs.addGoodsForm.validate(async valid => {
                if (!valid) return;
                let {
                    data: res
                } = await this.$http.post('goods', this.addGoodsForm);
                // console.log(res)
                if (res.meta.status != 201) return this.$message.error('添加商品失败');
                this.$router.push('/home/goods');
                this.$message.success('添加商品成功');
                // console.log(this.addGoodsForm)
            });
        },
        beforeLeave() {
            if (this.cascaderArr.length != 3 && this.activeName == '0') {
                this.$message.error('请选择商品分类，且必须是三级分类');
                return false
            }
        }
    },
}